<!DOCTYPE HTML>

<html>
    <head>
        <script type="application/ld+json">
    {
        "@context" : "http://schema.org",
        "@type" : "BlogPosting",
        "mainEntityOfPage": {
             "@type": "WebPage",
             "@id": "\/blog\/"
        },
        "articleSection" : "blog",
        "name" : "打卡系统技术总结分析",
        "headline" : "打卡系统技术总结分析",
        "description" : "mff的个人博客",
        "inLanguage" : "en",
        "author" : "",
        "creator" : "",
        "publisher": "",
        "accountablePerson" : "",
        "copyrightHolder" : "",
        "copyrightYear" : "2020",
        "datePublished": "2020-06-12 00:00:00 \x2b0000 UTC",
        "dateModified" : "2020-06-12 00:00:00 \x2b0000 UTC",
        "url" : "\/blog\/blog\/%E6%89%93%E5%8D%A1%E7%B3%BB%E7%BB%9F%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB%93%E5%88%86%E6%9E%90\/",
        "wordCount" : "56",
        "keywords" : [ "tutorial","Blog" ]
    }
    </script>
        
            
                <title>打卡系统技术总结分析</title>
            
        

        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="generator" content="Hugo 0.69.0" />
        
  
    
  

  

  <link rel="apple-touch-icon-precomposed" href='/blog/favicon/apple-touch-icon-precomposed.png'>
  <link rel="icon" href='/blog/favicon/favicon.png'>
  
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content='/favicon/mstile.png'>
  <meta name="application-name" content="mff blog">
  <meta name="msapplication-tooltip" content="">
  <meta name="msapplication-config" content='/favicon/ieconfig.xml'>



        
            <meta name="author" content="mff">
        
        
            <meta name="description" content="mff的个人博客">
        

        <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="打卡系统技术总结分析"/>
<meta name="twitter:description" content="mff的个人博客"/>

        <meta property="og:title" content="打卡系统技术总结分析" />
<meta property="og:description" content="mff的个人博客" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/blog/blog/%E6%89%93%E5%8D%A1%E7%B3%BB%E7%BB%9F%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB%93%E5%88%86%E6%9E%90/" />
<meta property="article:published_time" content="2020-06-12T00:00:00+00:00" />
<meta property="article:modified_time" content="2020-06-12T00:00:00+00:00" />

        <meta property="og:image" content="/blog//images/logo.png">
        <meta property="og:image:type" content="image/png">
        <meta property="og:image:width" content="512">
        <meta property="og:image:height" content="512">
        <meta itemprop="name" content="打卡系统技术总结分析">
<meta itemprop="description" content="mff的个人博客">
<meta itemprop="datePublished" content="2020-06-12T00:00:00&#43;00:00" />
<meta itemprop="dateModified" content="2020-06-12T00:00:00&#43;00:00" />
<meta itemprop="wordCount" content="56">



<meta itemprop="keywords" content="tutorial," />
        

        
            
        

        
        
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800,900|Source+Sans+Pro:400,700">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css">
            <link rel="stylesheet" href="/blog/css/main.css">
            <link rel="stylesheet" href="/blog/css/add-on.css">
            <link rel="stylesheet" href="/blog/css/academicons.min.css">
        

        
            
                
            
        


  
    
    <link href='//cdn.bootcss.com/highlight.js/9.11.0/styles/github.min.css' rel='stylesheet' type='text/css' />
  


      
    </head>
    <body>

      
      <div id="wrapper">

    
    
<header id="header">
    
      <h1><a href="/blog/">blog</a></h1>
    

    <nav class="links">
        <ul>
            
                <li>
                    <a href="/blog/">
                            <i class="fa fa-home">&nbsp;</i>主页
                    </a>
                </li>
            
                <li>
                    <a href="/blog/blog/">
                            <i class="fa fa-newspaper-o">&nbsp;</i>Blog笔记
                    </a>
                </li>
            
                <li>
                    <a href="https://mff-project.gitee.io/hugoblog/posts/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">
                            <i class="fa fa-id-card-o">&nbsp;</i>个人简历
                    </a>
                </li>
            
                <li>
                    <a href="/blog/itemized/">
                            <i class="fa fa-list">&nbsp;</i>最近项目
                    </a>
                </li>
            
                <li>
                    <a href="/blog/contact/">
                            <i class="fa fa-envelope-o">&nbsp;</i>联系我
                    </a>
                </li>
            
        </ul>
    </nav>
    <nav class="main">
        <ul>
            
            <li id="share-nav" class="share-menu" style="display:none;">
                <a class="fa-share-alt" href="#share-menu">Share</a>
            </li>
            
            <li class="search">
                <a class="fa-search" href="#search">Search</a>
                <form id="search" method="get" action="//google.com/search">
                    <input type="text" name="q" placeholder="Search" />
                    <input type="hidden" name="as_sitesearch" value="/blog/">
                </form>
            </li>
            <li class="menu">
                <a class="fa-bars" href="#menu">Menu</a>
            </li>
        </ul>
    </nav>
</header>


<section id="menu">

    
        <section>
            <form class="search" method="get" action="//google.com/search">
                <input type="text" name="q" placeholder="Search" />
                <input type="hidden" name="as_sitesearch" value="/blog/">
            </form>
        </section>

    
        <section>
            <ul class="links">
                
                    <li>
                        <a href="/blog/">
                            <h3>
                                <i class="fa fa-home">&nbsp;</i>主页
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/blog/">
                            <h3>
                                <i class="fa fa-newspaper-o">&nbsp;</i>Blog笔记
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="https://mff-project.gitee.io/hugoblog/posts/%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">
                            <h3>
                                <i class="fa fa-id-card-o">&nbsp;</i>个人简历
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/itemized/">
                            <h3>
                                <i class="fa fa-list">&nbsp;</i>最近项目
                            </h3>
                        </a>
                    </li>
                
                    <li>
                        <a href="/blog/contact/">
                            <h3>
                                <i class="fa fa-envelope-o">&nbsp;</i>联系我
                            </h3>
                        </a>
                    </li>
                
            </ul>
        </section>

    
        <section class="recent-posts">
            <div class="mini-posts">
                <header>
                    <h3>Recent Posts</h3>
                </header>
                

                
                    
                

                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/fastdfs%E9%85%8D%E7%BD%AE%E5%8F%8A%E4%BB%8B%E7%BB%8D/">FastDFS配置及介绍</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-08-27'>
                                    August 27, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/orm%E5%B8%B8%E8%A7%84%E6%93%8D%E4%BD%9C%E9%87%8D%E7%82%B9/">orm常规操作</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-28'>
                                    July 28, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%B2%99%E7%AE%B1%E6%94%AF%E4%BB%98%E6%93%8D%E4%BD%9C/">支付宝沙箱支付操作</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-28'>
                                    July 28, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/%E8%85%BE%E8%AE%AF%E7%9F%AD%E4%BF%A1%E5%8F%91%E9%80%81%E9%AA%8C%E8%AF%81%E7%A0%81/">腾讯短信发送验证码</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-28'>
                                    July 28, 2020</time>
                            </header>
                            

                        </article>
                
                        <article class="mini-post">
                            <header>
                                <h3><a href="/blog/blog/flask&#43;vue%E5%AE%9E%E7%8E%B0%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/">flask&#43;vue实现前后端分离</a></h3>
                                
                                <time class="published" datetime=
                                    '2020-07-26'>
                                    July 26, 2020</time>
                            </header>
                            

                        </article>
                

                
                    <a href=
                        
                            /blog/
                        
                        class="button">View more posts</a>
                
            </div>
        </section>

    
        
</section>

    <section id="share-menu">
    <section id="social-share-nav">
        <ul class="links">
            <header>
                <h3>Share this post <i class="fa fa-smile-o"></i></h3>
            </header>
            



<li>
  <a href="//twitter.com/share?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;text=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90&amp;via=" target="_blank" class="share-btn twitter">
    <i class="fa fa-twitter"></i>
    <p>Twitter</p>
    </a>
</li>




<li>
  <a href="//plus.google.com/share?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f" target="_blank" class="share-btn google-plus">
    <i class="fa fa-google-plus"></i>
    <p>Google+</p>
  </a>
</li>





<li>
  <a href="//www.facebook.com/sharer/sharer.php?u=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook"></i>
    <p>Facebook</p>
    </a>
</li>




<li>
  <a href="//reddit.com/submit?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;title=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn reddit">
    <i class="fa fa-reddit-alien"></i>
    <p>Reddit</p>
  </a>
</li>




<li>
  <a href="//www.linkedin.com/shareArticle?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;title=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn linkedin">
      <i class="fa fa-linkedin"></i>
      <p>LinkedIn</p>
    </a>
</li>




<li>
  <a href="//www.stumbleupon.com/submit?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;title=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn stumbleupon">
    <i class="fa fa-stumbleupon"></i>
    <p>StumbleUpon</p>
  </a>
</li>




<li>
  <a href="//www.pinterest.com/pin/create/button/?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;description=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn pinterest">
    <i class="fa fa-pinterest-p"></i>
    <p>Pinterest</p>
  </a>
</li>




<li>
  <a href="mailto:?subject=Check out this post by mff&amp;body=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f" target="_blank" class="share-btn email">
    <i class="fa fa-envelope"></i>
    <p>Email</p>
  </a>
</li>


        </ul>
    </section>
</section>

    
    <div id="main">
        
        
        <article class="post">
  <header>
    <div class="title">
        
            <h1><a href="/blog/blog/%E6%89%93%E5%8D%A1%E7%B3%BB%E7%BB%9F%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB%93%E5%88%86%E6%9E%90/">打卡系统技术总结分析</a></h1>
            
        
        
            <p>mff的个人博客</p>
        
    </div>
    <div class="meta">
        

        <time class="published"
            datetime='2020-06-12'>
            June 12, 2020</time>
        <span class="author">mff</span>
        
            <p>1 minute read</p>
        
        
    </div>
</header>


  
    <section id="social-share">
      <ul class="icons">
        



<li>
  <a href="//twitter.com/share?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;text=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90&amp;via=" target="_blank" class="share-btn twitter">
    <i class="fa fa-twitter"></i>
    <p>Twitter</p>
    </a>
</li>




<li>
  <a href="//plus.google.com/share?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f" target="_blank" class="share-btn google-plus">
    <i class="fa fa-google-plus"></i>
    <p>Google+</p>
  </a>
</li>





<li>
  <a href="//www.facebook.com/sharer/sharer.php?u=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f" target="_blank" class="share-btn facebook">
    <i class="fa fa-facebook"></i>
    <p>Facebook</p>
    </a>
</li>




<li>
  <a href="//reddit.com/submit?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;title=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn reddit">
    <i class="fa fa-reddit-alien"></i>
    <p>Reddit</p>
  </a>
</li>




<li>
  <a href="//www.linkedin.com/shareArticle?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;title=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn linkedin">
      <i class="fa fa-linkedin"></i>
      <p>LinkedIn</p>
    </a>
</li>




<li>
  <a href="//www.stumbleupon.com/submit?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;title=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn stumbleupon">
    <i class="fa fa-stumbleupon"></i>
    <p>StumbleUpon</p>
  </a>
</li>




<li>
  <a href="//www.pinterest.com/pin/create/button/?url=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f&amp;description=%e6%89%93%e5%8d%a1%e7%b3%bb%e7%bb%9f%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93%e5%88%86%e6%9e%90" target="_blank" class="share-btn pinterest">
    <i class="fa fa-pinterest-p"></i>
    <p>Pinterest</p>
  </a>
</li>




<li>
  <a href="mailto:?subject=Check out this post by mff&amp;body=%2fblog%2fblog%2f%25E6%2589%2593%25E5%258D%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E6%258A%2580%25E6%259C%25AF%25E6%2580%25BB%25E7%25BB%2593%25E5%2588%2586%25E6%259E%2590%2f" target="_blank" class="share-btn email">
    <i class="fa fa-envelope"></i>
    <p>Email</p>
  </a>
</li>


      </ul>
    </section>
  

  

  <div id="content">
    <h2 id="打卡系统概括">打卡系统概括</h2>
<p>1、数据bai实时自动上传避免传统考勤数据du丢失及不及时弊端，确保员工工zhi时数据的及时性和精确性；</p>
<p>2、考勤规dao则配置功能可配置各种复杂考勤、工时、刷卡、排班、加班、请假的规则，并且自动实时运算，提供精确和实时的工时数据，大大减少人工核对时间和误差；
3、不同的员工类型进行假期类型和假期库存规则、假期使用规则，让员工假期透明化，假期管理简单化；
4、异常处理都可以通过自助功能实现，实现工作量化分摊从而大大减少HR工作量；
这些考勤动作对老板和员工都有很大的帮助。</p>
<h2 id="实现原理">实现原理</h2>
<p>首先看一下流程图</p>
<p><img src="/blog/img/imgs/%E6%89%93%E5%8D%A1%E7%B3%BB%E7%BB%9F%E5%8E%9F%E7%90%86%E6%B5%81%E7%A8%8B%E5%9B%BE.jpg" alt="打卡系统原理流程图"></p>
<ol>
<li>
<p>首先员工打卡系统会需要创建数据库来存放信息，这里用到了mysql数据库并创建了四张表</p>
<ol>
<li>
<p>员工表：用于存储员工个人信息</p>
</li>
<li>
<p>管理员表：用于操作员工表，有权限对其进行增删改查的操作</p>
</li>
<li>
<p>部门表：存储有关部门信息，且员工表与管理员表为关系表，方便管理与查找员工出勤情况</p>
</li>
<li>
<p>用户日志表：用于存储员工打卡的时间记录</p>
</li>
</ol>
</li>
<li>
<p>开发语言为python，实现后端框架用到了Django</p>
<ol>
<li>
<p>首先搭建好框架以后，创建models模型用于执行迁移文件，方便更改数据库</p>
</li>
<li>
<p>当这些准备完成以后，开始面向对象编程(<strong>封装</strong>、<strong>继承</strong>、<strong>多态</strong>)</p>
</li>
</ol>
</li>
<li>
<p>后端都实现了什么功能：</p>
<ol>
<li>
<p>用户注册，用到了继承API接口的类方法，将接收到用户信息的字段存储到数据库并验证用户是否合法</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Register</span>(APIView):
</code></pre></div></li>
<li>
<p>用户登录的实现，接收到的用户信息用于查询数据库中数据，合法则验证成功，不合法就验证失败</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Login</span>(APIView):
</code></pre></div></li>
<li>
<p>员工打卡接口的实现，当前端用户点击打卡以后触发axios请求，将携带用户信息传递到后端存储到日志表，记录用户行为</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Staff_Card</span>(APIView):
</code></pre></div></li>
<li>
<p>判断今日是否已打卡，在用户点击一次打卡的时候，就会存储一次数据，如果不做判断，用户将会无限打卡，数据也会无限存储，如果判断过用户是否已打卡后，就会显示已打卡，防止了无限打卡的可能</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">If_Card</span>(APIView):
</code></pre></div></li>
<li>
<p>当用户打卡成功后，将会统计打卡天数，打卡满一天，将会积分加一，增强了用户行为的可视性，也方便管理</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#75715e"># 每签到一天则积分+1</span>
count <span style="color:#f92672">=</span> staff<span style="color:#f92672">.</span>integral <span style="color:#f92672">+</span> <span style="color:#ae81ff">1</span>
</code></pre></div></li>
<li>
<p>返回用户个人信息的接口：为了方便打卡以后不知道自己的打卡时间以及积分，返回用户的打卡时间，并且只有权查看自己的打卡信息，别人的打卡信息无权查看</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Staff_oneself</span>(APIView):
</code></pre></div></li>
<li>
<p>返回所有用户的打卡信息接口，方便管理员管理，只能查看本部门的员工打卡情况，并且可以对员工进行增加或扣除积分的操作，有权查看所有员工的打卡记录</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Staff_Msg</span>(APIView):
</code></pre></div></li>
<li>
<p>后端的大致实现原理就是这样，当前端用户访问一个页面或做出一些操作时会调用这些接口，来实现后端的操作</p>
</li>
</ol>
</li>
<li>
<p>前端实现了什么功能：</p>
<ol>
<li>
<p>前端就是用户可视的页面，可以理解为APP，网页，这里用的vue前后端分离，异步请求实现前后端的连接，前端后端互不影响，调用后端接口实现功能，这就是面向对象编程的多态，方便数据的传递。</p>
</li>
<li>
<p>首先配置好允许跨域请求后，就可以链接前后端的关系，前端可以分三大部分，网页架构，js，css,最基本的网页架构就是平时进入网页的布局，数据块，js是执行用户操作的，也可以说js就是连接后端，并且发送异步请求的，css是网页样式，平时看到的背景颜色，静态或动态图，以及文字字体颜色等都是css部署的</p>
</li>
<li>
<p>这里写了5个模板，分别实现了不同的功能</p>
<ol>
<li>register，注册模板，异步请求接口也是对应着后端接口，用于用户填写信息入库</li>
<li>login，登录模板，用于验证用户信息，从中做了jwt，增加了用户的安全性</li>
<li>index，打卡界面，做了打卡按钮当用户点击后发送异步请求访问接口，前端存储了localStorage用于做状态保持，当用户点击退出登录后会自动清除localStorage里面的内容，下次登录会重新验证用户</li>
<li>staff_query，展示个人信息及行为的模板，当验证完登录后，会有权限查看个人的打卡信息</li>
<li>administrator，展示所有用户，只有具有管理权限的账号才可进入，说直接点，可以直接具有修改数据库中数据的权限</li>
</ol>
</li>
</ol>
</li>
<li>
<p>文件的目录结构及作用</p>
<ol>
<li>
<p>Django框架的文件结构</p>
<p><img src="/blog/img/imgs/Django%E6%96%87%E4%BB%B6%E7%9B%AE%E5%BD%95.png" alt="Django文件目录"></p>
</li>
<li>
<p>vue文件结构</p>
<p><img src="/blog/img/imgs/vue%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95.png" alt="vue项目目录"></p>
</li>
</ol>
</li>
</ol>

  </div>

  <footer>
    <ul class="stats">
  <li class="categories">
    <ul>
        
            
            
                <i class="fa fa-folder"></i>
                
                
                <li><a class="article-category-link" href="/blog/blog/categories/hugo">Hugo</a></li>
                
            
        
    </ul>
  </li>
  <li class="tags">
    <ul>
        
            
            
                <i class="fa fa-tags"></i>
                
                
                <li><a class="article-category-link" href="/blog/blog/tags/tutorial">tutorial</a></li>
                
            
        
    </ul>
  </li>
</ul>

  </footer>

</article>

    <article class="post">
        <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "shortname" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    </article>


<ul class="actions pagination">
    
        <li><a href="/blog/blog/python%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/"
                class="button big previous">python数据类型常用方法</a></li>
    

    
        <li><a href="/blog/blog/linux%E6%93%8D%E4%BD%9Credis%E9%9B%86%E7%BE%A4/"
                class="button big next">Linux操作redis集群</a></li>
    
</ul>


    </div>
    
<section id="sidebar">

  
  <section id="intro">
    
    
      
        <a href='/blog/'><img src="/blog/img/main/touxiang3.jpg" class="intro-circle" width="150px" alt="Hugo Future Imperfect" /></a>
      
    
    
      <header>
        <h2>mff</h2>
        <p>Effort is for money, and money is life!</p>
      </header>
    
    
      <ul class="icons">
        
          
    <li><a href="/blog/blog/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li>


        
        












































































  <li><a href="mailto:2980738482@qq.com" title="Email" class="fa fa-envelope"></a></li>


      </ul>
    
  </section>

  
  <section class="recent-posts">
    <div class="mini-posts">
      <header>
        <h3>Recent Posts</h3>
      </header>
      <div class="posts-container">
        

        
          
        

        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/fastdfs%E9%85%8D%E7%BD%AE%E5%8F%8A%E4%BB%8B%E7%BB%8D/">FastDFS配置及介绍</a>
              </h3>
              
              <time class="published" datetime='2020-08-27'>
                August 27, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/orm%E5%B8%B8%E8%A7%84%E6%93%8D%E4%BD%9C%E9%87%8D%E7%82%B9/">orm常规操作</a>
              </h3>
              
              <time class="published" datetime='2020-07-28'>
                July 28, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%B2%99%E7%AE%B1%E6%94%AF%E4%BB%98%E6%93%8D%E4%BD%9C/">支付宝沙箱支付操作</a>
              </h3>
              
              <time class="published" datetime='2020-07-28'>
                July 28, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/%E8%85%BE%E8%AE%AF%E7%9F%AD%E4%BF%A1%E5%8F%91%E9%80%81%E9%AA%8C%E8%AF%81%E7%A0%81/">腾讯短信发送验证码</a>
              </h3>
              
              <time class="published" datetime='2020-07-28'>
                July 28, 2020
              </time>
            </header>
            

          </article>
        
          <article class="mini-post">
            <header>
              <h3>
                <a href="/blog/blog/flask&#43;vue%E5%AE%9E%E7%8E%B0%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/">flask&#43;vue实现前后端分离</a>
              </h3>
              
              <time class="published" datetime='2020-07-26'>
                July 26, 2020
              </time>
            </header>
            

          </article>
        
      </div>

      
        <a href=
          
            /blog/
          
        class="button">View more posts</a>
      
    </div>
  </section>

  
  
  
  
  
    <section id="categories">
      <header>
        <h3>
          <a href="/blog/categories/">Categories</a>
        </h3>
      </header>
        
          
        

        
        <p>
          <article>
            <header>
              
                <a href="/blog/categories/hugo/">hugo</a>
                <span style="float:right;">43</span>
              
            </header>
          </article>
        </p>
        
    </section>
  
  

  
  
    <section id="mini-bio">
      <h3>About</h3>
      <p>blog于2018年6月10日创建(It was created on May 10, 2020),文章主要介绍了python的一些常用框架和库及它们的一些用法</p>
      <a href="/blog/about/" class="button">Learn More</a>
    </section>
  

  
  <section id="footer">
    
      <ul class="icons">
        
          
    <li><a href="/blog/blog/index.xml" type="application/rss+xml" target="_blank" title="RSS" class="fa fa-rss"></a></li>


        
        












































































  <li><a href="mailto:2980738482@qq.com" title="Email" class="fa fa-envelope"></a></li>


      </ul>
    
    <p class="copyright">
      
        &copy; 2020
        
          mff blog
        
      .
      Powered by <a href="//gohugo.io" target="_blank">Hugo</a>
    </p>
  </section>
</section>

    </div>
    <a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
    

    
      
    

    
      
      
      
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
        
        
        
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/r.min.js"></script>
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/yaml.min.js"></script>
        <script src="//cdn.bootcss.com/highlight.js/9.11.0/languages/css.min.js"></script>
        <script>hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>
      
    
    
    
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>
      <script src="/blog/js/util.js"></script>
      <script src="/blog/js/main.js"></script>
      <script src="/blog/js/backToTop.js"></script>
    

    
      
        
      
    

    
    <script>hljs.initHighlightingOnLoad();</script>
      <script src="//yihui.name/js/math-code.js"></script>
<script async
src="//cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>


  </body>
</html>

